<template xmlns:v-clipboard="http://www.w3.org/1999/xhtml">
    <transition>
        <div class="mui-content height-100">
            <div id="tabbar" class="mui-control-content mui-active height-100">
                <header class="mui-bar mui-bar-nav box-none immerse-margin">
                    <ul class="coffer-box">
                        <li @click="changeRoute('/wallet/qrcode')">
                            <img src="@/assets/img/SVG_fenlei.png" alt="" class="saomaimg">
                        </li>
                        <li></li>
                        <li @click="changeRoute('/wallet/list')">
                            <div class="coffer-titbox">
                                <span class="coffer-titname">ETSC</span>
                                <img src="@/assets/img/arrow.png" alt="">
                            </div>

                        </li>
                        <li></li>
                        <li>
                            <img src="@/assets/img/saomiao.png" alt="" class="saomaimg" @click="changeRoute('/scan')">
                        </li>
                    </ul>
                </header>
                <div class="tit-box">
                    <div class="coffer-bgbox">
                        <div class="coffer-img">
                            <img :src="walletActive.avatar" alt="">
                        </div>
                        <div class="coffer-text">
                            <span>Wallet-{{ walletActive.index }}</span>
                            <p>
                                <span class="coffer-font coffer-keytext">{{ addressSub(walletActive.address) }}</span>
                                <!--<span class="coffer-font coffer-endtxt"></span>-->
                                <img src="@/assets/img/coffer/copy.png" class="coffer-copy" alt=""
                                     v-clipboard:copy="walletActive.address"
                                     v-clipboard:success="doClipboard"
                                     v-clipboard:error="">
                            </p>
                        </div>
                        <div class="coffer-rg" @click="changeRoute('/wallet/manager/index')" style="width: 50px;text-align: right">
                            <img src="@/assets/img/slh.png" alt="">
                        </div>
                        <div class="coffer-money" v-if="exchange.type=='CNY'">
                            <span style="vertical-align: 7px;margin-right: 5px;">¥</span>
                            <span>{{ balance.ETSC * currency.ETSC + balance.ETH * currency.ETH | roundOff(2) }}</span>
                        </div>
                        <div class="coffer-money" v-else>
                            <span style="vertical-align: 7px;margin-right: 5px;">$</span>
                            <span>{{ balance.ETSC * currency.ETSC / exchange.rate + balance.ETH * currency.ETH / exchange.rate | roundOff(2) }}</span>
                        </div>
                    </div>
                    <div class="coffer-tit">
                        <h1>{{ $t('m.wallet.index.listTitle') }}</h1>
                        <!--TODO-->
                        <!--<span class="mui-icon mui-icon-plus"></span>-->
                    </div>
                </div>
                <div class="coffer-refresh">
                    <ul class="mui-table-view">
                        <li class="mui-table-view-cell" @click="changeRoute('/wallet/transaction/etsc/list')">
                            <a class="">
                                <div class="coffer-name">
                                    <span class="img-box"><img src="@/assets/img/ETSClogo.png" alt=""></span>
                                    <span>ETSC</span>
                                </div>
                                <div class="coffer-coffer-money">
                                    <span>{{ balance.ETSC | roundOff(4) }}</span>
                                    <span style="text-align: right" v-if="exchange.type=='CNY'">
                                        <span style="margin-right: .05rem">¥</span>
                                        {{ balance.ETSC * currency.ETSC | roundOff(2) }}
                                    </span>
                                    <span style="text-align: right" v-else>
                                        <span style="margin-right: .05rem">$</span>
                                        {{ balance.ETSC * currency.ETSC / exchange.rate | roundOff(2) }}
                                    </span>
                                </div>
                            </a>
                        </li>
                        <li class="mui-table-view-cell" @click="changeRoute('/wallet/transaction/eth/list')">
                            <a class="">
                                <div class="coffer-name">
                                    <span class="img-box"><img src="@/assets/img/coffer/ETH.png" alt="" style="margin-top: 0.1rem;"></span>
                                    <span>ETH</span>
                                </div>
                                <div class="coffer-coffer-money">
                                    <span>{{ balance.ETH | roundOff(4) }}</span>
                                    <span style="text-align: right" v-if="exchange.type=='CNY'">
                                        <span style="margin-right: .05rem">¥</span>
                                        {{ balance.ETH * currency.ETH | roundOff(2) }}
                                    </span>
                                    <span style="text-align: right" v-else>
                                        <span style="margin-right: .05rem">$</span>
                                        {{ balance.ETH * currency.ETH / exchange.rate| roundOff(2) }}
                                    </span>
                                </div>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
            <!--安全提醒开始-->
            <transition name="safe-tips">
                <div class="safe-tips" v-show="!walletActive.backUp && showBackUp">
                    <h1>{{ $t('m.wallet.index.prompt[0]') }}</h1>
                    <p>{{ $t('m.wallet.index.prompt[1]') }}</p>
                    <p>{{ $t('m.wallet.index.prompt[2]') }}</p>
                    <div class="safe-btn">
                        <button @click="showBackUp = false">{{ $t('m.wallet.index.prompt[3]') }}</button>
                        <button @click="changeRoute('/my/identity')">{{ $t('m.wallet.index.prompt[4]') }}</button>
                    </div>
                </div>
            </transition>
            <Alert_little></Alert_little>
        </div>
    </transition>
</template>
<script>
    /* eslint-disable */
    import {synBalanceOnce, synWallet} from '@/assets/js/timer/index';
    import axios from "axios";


    export default {
        name: 'wallet_index',
        created() {
            synWallet();
            synBalanceOnce();
        },
        mounted() {
            setTimeout(() => {
                this.isUpdate();
            }, 1000);
            this.showBackUp = true;
            // 按下安卓返回键后，让页面不返回
            this.$store.dispatch("aBackUrl", "no");
        },
        data() {
            return {
                showBackUp: false,
                clipboardShow: true
            }
        },
        methods: {
            doClipboard: function () {
                this.aAlert_little({
                    msg: this.$t('m.wallet.index.prompt[5]'),
                    top: "220px"
                })
            },
            isUpdate: function () {
                // 定义当前版本
                let version = 118;
                let needUpdate = false;
                let url = "";
                if (sessionStorage.getItem("updateConfirm") || (typeof plus == "undefined")) return;

                if ('Android' === plus.os.name) {
                    url = "http://wallet.etsccoin.io/inform/android.php";
                } else {
                    url = "http://wallet.etsccoin.io/inform/ios.php";
                }
                axios.get(url).then((response) => {
                    if (response.data.version > version) {
                        needUpdate = true;
                    }
                    if (needUpdate) {
                        //新增版本更新动态提示
                        let cue = {"en-US":response.data.en}[this.$i18n.locale] || response.data.cn;
                        plus.nativeUI.confirm(cue, function (event) {
                            sessionStorage.setItem("updateConfirm", 1);
                            if (event.index == 0) {
                                plus.runtime.openURL("http://wallet.etsccoin.io");
                            }
                        });
                    }
                }).catch(function (error) {
                    console.log(error);
                });

            }
        }
    }
</script>
<style scoped>
    @import '../../assets/css/coffer.css';

    .mui-bar-tab ~ .mui-content {
        overflow: hidden;
        background-color: #FAFBFC;
    }

    .coffer-box li .mui-icon {
        margin-left: -10px !important;
    }

    .copy-fade-leave-active {
        transition: opacity .5s;
    }

    .copy-fade-leave-to /* .fade-leave-active below version 2.1.8 */
    {
        opacity: 0;
    }

    .safe-tips-leave-active {
        transition: all 0.5s;
    }

    .safe-tips-leave-to {
        transform: translateY(10rem);
    }

    .img-box {
        overflow: hidden;
    }

    .img-box img {
        width: 100%;
        height: 100%;
    }
</style>
